---
layout: post
date: 2012-06-01
title: "Minimalist Markup"
tags: [performance, ui]
---
<p>Yesterday <a href="/2012/5/31/Can-You-Make-My-Homepage-Smaller/">I asked for help</a> getting the size of my blog's homepage down. With a handful of people, we got the size down from ~19KB to under 15KB.</p>

<p>Some people thought this was a wasteful exercise. I assure you, it was not. This is how you learn, by doing and trying. How do you know what is and isn't possible if you assume your knowledge is complete? I'm not worried about my blog's page load speed. I'm not worried about the bandwidth. It's hosted by Github. But why not see what's possible and learn stuff on the way?</p>

<p>Also, it was pretty fascinating seeing how everyone had their own thing they wanted to tackle. Some people focused on the CSS, some on the formatting, some on what was generated by the template. Some were willing to go further than I was, some weren't.</p>

<h3>What We Didn't Change</h3>
<p>There were things I wasn't willing to do. I didn't want to add paging. This would have had the most  impact. As-is, the page will just keep getting bigger and bigger, though I bet internet and computer speeds will always gain at a faster rate. I also didn't want to break any existing URLs. If I had, i could have removed the date portion from all the links.</p>

<p>I didn't want to use URL shortener for my few external links, especially for my audience. Geeks recognize URL shortening service and think twice before clicking because of their opaqueness. Plus, it's just something else that can go wrong.</p>

<p>Finally, given that the bulk is repetitive, at some point, adding JavaScript to generate some of the DOM will result in a smaller file. You'd have to do it without a library (or wait until you have that much more content and the library size is smaller). But, I don't want that either. JavaScript for an listing of links? Please.</p>

<h3>What We Did Change</h3>
<p>We'll split the list of changes into two. First, things that are likely applicable to any site (not saying they should be applied, just that they probably can):</p>

<ul>
  <li>The protocol was removed from all external links. Instead of <code>http://twitter.com/karlseguin</code>, use <code>//twitter.com/karlseguin</code>
  <li>Quotes were removed from all attributes that didn't need them, which ended up being all attributes
  <li>Optional closing tags were removed. Initially this was the closing html, body and every closing li tag
  <li>Optional opening tags were removed. This includes the html, head and body tag
  <li>Indentation and formatting were reduced to a bare minimum, while keeping the source readable
  <li>Used shorthand css colors <code>#047</code> instead of <code>#004477</code>
  <li>Omit the CSS unit when the value is 0
  <li>Instead of specifying <code>top right bottom left</code> CSS values, use a shorthand (X, X Y, or X Y Z)
</ul>

<p>Next is a list of things I was able to do specific to my site/content:</p>
<ul>
  <li>FeedBurner's long link, which appears twice, was replaced with a redirect rss.openmymind.net which 302s
  <li>Since I have a minimum amount of markup, my CSS targets tags. Instead of doing <code>&lt;div id="header"></code> with a css rule that targets <code>#header</code>, I can make use of only a single <code>&lt;div></code> and target it directly
  <li>Why use a <code>div</code> when you can use a <code>p</code>?
  <li>The leading / was removed from all posts, as they are all relative to the root anyways
  <li>Although I didn't want to break existing URLs, posts starting from this one won't include the date
  <li>The year was removed from the displayed date
  <li>Leading 0 removed from the day of the month when less than 10
</ul>

<p>You can see the pre-rendered source <a href="https://github.com/karlseguin/karlseguin.github.com/blob/master/index.html">on github</a>. And of course, you can see the finalized source by going back to the homepage and viewing source.</p>

<p>I was surprised to find out that the closing tags were optional on so many elements. I was even more surprised to find out that opening tags were optional! But then, it makes sense. Neither the html, head or body tag provide any context for their child elements. What a browser needs to do with a title or meta tag is obvious even without a head tag. Similarly, what you do with a div or h1 is obivous even without a body tag.</p>

<p>Note that the homepage <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fopenmymind.net">is valid</a>. If that bothers you, re-read the specs. This isn't XHTML.</p>

<p>Finally, a message to all of you with blogs whose homepage is measured in megabytes and load times in seconds. Stop it. Seriously.</p>

<p>If you found this post interesting, then the <a href="http://news.ycombinator.com/item?id=677125">HN discussion</a> about the similar steps Google used to take might also interest you .</p>
